<template>
  <div>
    <Card>
			<!-- 角色设置面板 -->
			<Modal v-model="set" title="设置用户角色"  @on-ok="ok">
				<div class="set-user-box">
					<Split v-model="split1">
						<div slot="left" class="user-split-pane">
							<div class="set-user-title">
								可以选择的角色
							</div>
							<ul class="set-user-ul">
								<li v-for="(item, index) in selectList" :key="index" @click="selectRole(item)">
									{{item.roleName}}
								</li>
							</ul>
						</div>
						<div slot="right" class="user-split-pane">
							<div class="set-user-title">
								已经选择的角色
							</div>
							<ul class="set-user-ul">
								<li v-for="item in selectedList" :key="item.rid" @click="deleteRole(item)">
									{{item.roleName}}
								</li>
							</ul>
						</div>
					</Split>
				</div>
      </Modal>
			<!-- 冻结操作面板 -->
			<Modal	v-model="frozen" title="设置冻结"	@on-ok="frozenOk">
				<p>{{frozenTxt}}</p>
			</Modal>
			<!-- 审核操作面板 -->
			<Modal v-model="setexamine"		title="设置审核"		@on-ok="examineOk">
				<p>{{examineTxt}}</p>
			</Modal>
			<!-- 搜索框 -->
			<div class="form-div">
				<Input v-model="userName" placeholder="请输入用户名进行搜索" style="width: 200px" />
				<Button style="margin: 10px 0;" icon="ios-search" type="primary" @click="select" class="large">搜索</Button>
			</div>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
					title: '序号',
					type: 'index'
				},
        {
					title: '用户名',
					key: 'userName'
				},
				{
					title: '手机号',
					key: 'phone'
				},
				{
					title: '审核状态',
					key: 'examineState',
					render: (h, params) => {
						if (params.row.examineState === 1) {
							return h('span', ' 已审核')
						}
						if (params.row.examineState === 0) {
							return h('span', ' 未审核 ')
						}
					}
				},
				{
					title: '冻结状态',
					key: 'frozenState',
					render: (h, params) => {
						if (params.row.frozenState === 1) {
							return h('span', ' 未冻结')
						}
						if (params.row.frozenState === 0) {
							return h('span', ' 已冻结 ')
						}
					}
				},
				{
          title: '操作',
          key: 'handle',
          render: (h, params) => {
						return h('div', [
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												// 获取该用户的所有角色信息
												// for (var i = 0; i < params.row.authorities.length; i++) {
												// 	this.roleList.push(params.row.authorities[i].id)
												// }
												this.roleList = []
												this.$api.get(0, '/usr/v2/userRole/list', {uId: params.row.uid}, r => {
													if (r.data.code === 0) {
														for (let i = 0; i < r.data.data.length; i++) {
															this.roleList.push(r.data.data[i].rid)
														}
													}
												})
												this.set = true
												this.userId = params.row.uid
												this.selectList = []
												this.selectedList = []
												// 获取所有角色列表
												this.$api.get(0, '/usr/v2/role/list', {}, r => {
													if (r.data.code === 0) {
														for (var i = 0; i < r.data.data.length; i++) {
															if (this.roleList.indexOf(r.data.data[i].rid) === -1) {
																this.selectList.push(r.data.data[i])
															} else {
																this.selectedList.push(r.data.data[i])
															}
														}
													}
												})
											}
									}
							}, '设置角色'),
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.setexamine = true
												this.uid = params.row.uid
												if (params.row.examineState === 0) {
													this.examineTxt = '确认通过审核？'
													this.eState = 1
												} else {
													this.examineTxt = '确认解除审核？'
													this.eState = 0
												}
											}
									}
							}, '审核'),
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.frozen = true
												this.uid = params.row.uid
												if (params.row.frozenState === 0) {
													this.frozenTxt = '确认解除冻结？'
													this.fState = 1
												} else {
													this.frozenTxt = '确认进行冻结？'
													this.fState = 0
												}
											}
									}
							}, '冻结')
						])
					}
        }
      ],
      tableData: [],
			set: false,
			count: 0,
			pageSize: 5,
			page: 1,
			role: '',
			roleList: [],
			userId: '',
			setexamine: false,
			examineTxt: '',
			eState: 1,
			uid: '',
			frozen: false,
			frozenTxt: '',
			fState: 1,
			userName: '',
			split1: 0.5,
			selectList: [],
			selectedList: [],
			submitList: []
    }
  },
  methods: {
		// 提交时角色设置查重
		ok () {
			this.submitList = []
			for (var i = 0; i < this.selectedList.length; i++) {
				this.submitList.push(this.selectedList[i].rid)
			}
			console.log(this.submitList)
			this.$api.put(0, '/usr/v2/userRole/list', {uId: this.userId, rIds: this.submitList.join()}, r => {
				console.log(r)
				if (r.data.code === 0) {
					this.getList()
					this.$Message.success('保存成功')
				} else {
					this.$Message.error('保存失败')
				}
			})
		},
		// 选择角色
		selectRole (index) {
			this.selectList.splice(this.selectList.indexOf(index), 1)
			this.selectedList.push(index)
		},
		// 删除角色
		deleteRole (index) {
			this.selectedList.splice(this.selectedList.indexOf(index), 1)
			this.selectList.push(index)
		},
		// 分页跳转
		handlePage (value) {
			this.page = value
			this.getList()
		},
		// 审核操作
		examineOk () {
			this.$api.put(0, '/usr/v2/user', {uId: this.uid, examineState: this.eState}, r => {
				this.getList()
			})
		},
		// 冻结操作
		frozenOk () {
			this.$api.put(0, '/usr/v2/user', {uId: this.uid, frozenState: this.fState}, r => {
				this.getList()
			})
		},
		// 通过名字查找用户信息
		select () {
			this.$api.post(0, '/auth/user/getUserPage', {page: this.page, limit: 5, rid: 2, name: this.userName}, r => {
				this.tableData = r.data.data
			})
		},
		// 获取用户列表
		getList () {
			this.$api.get(0, '/usr/v2/user/page?page=' + this.page + '&limit=' + this.pageSize, {}, r => {
				if (r.data.code === 0) {
					this.tableData = r.data.data.data
					this.count = parseInt(r.data.data.total)
				}
			})
		}
  },
  mounted () {
		this.getList()
  }
}
</script>

<style>
  ul.ivu-page{
		margin-top:20px
	}
	table{
		width:100%!important
	}
	div.form-div{
		margin-bottom:15px;
	}
	.set-user-box div:after{
		content: "";
		display: block;
		clear: both;
	}
	.set-user-box{
		height:500px
	}
	.set-user-title{
		border-bottom:1px solid #ddd;
		font-size: 16px;
		padding-bottom:10px;
		padding-left:10px
	}
	.set-user-ul{
		height: 400px;
		overflow: auto;
	}
	.set-user-ul li{
		list-style: none;
		padding:10px;
		cursor: pointer;
	}
	.set-user-ul li.selected{
		color:#CB2D5D
	}
	.set-user-btn{
		position: absolute;
		bottom:0;
		right:20px
	}
	.user-split-pane{
		padding:10px;
		position: relative;
		height:100%
	}
</style>
